<template>
	<view class="toClassify">
		<Navigation title="商城" background="#FABB3C" titleColor="#fff" />
		<view class="top-box ph-24 pv-14 f ai-c jc-s-b">
			<view class="f f1">
				<view class="search w-f">
					<u-search placeholder="快速查找戳我" v-model="queryParams.keyword" height="30" bgColor="#FFFFFF"
						searchIconColor="#999" placeholderColor="#999" clearabled :showAction="false">
					</u-search>
					<view class="w-100 search-btn"><u-button text="搜索" color="#FABB3C" shape="circle"
							@click.stop="handelSearch"></u-button></view>
				</view>
			</view>
			<view class="w-40 h-40 ml-24 cart" @click="toCart">
				<image src="http://cwht.ricecs.cn/app/shop/cart.png" class="w-40 h-40"></image>
				<view class="w-20 h-20 b-20" v-show="cartCount > 0"></view>
			</view>
		</view>

		<view class="f list">
			<view class="f f1 fd-c">
				<view class="h-80 w-f">
					<u-tabs :list="timeList" lineColor="#FABB3C"
						:activeStyle="{ fontSize: '28rpx', color: '#222222', fontWeight: '600' }"
						:inactiveStyle="{ fontSize: '28rpx', color: '#999999' }" @click="changeTime" :current="timeCurt"
						keyName="timeSlot">
					</u-tabs>
				</view>
				<scroll-view scroll-y="true" :style="{ height: height - 40 + 'px' }" @scrolltolower="scrolltolower">
					<view class="f jc-s-b mt-20 ph-16">
						<view class="mr-16">
							<view v-for="(item, index) in listL" :key="index"
								class="w-343 b-24 ph-8 pt-8 pb-20 goods mb-16" @click="toDetail(item)">
								<!-- 秒杀中 -->
								<view class="w-190 h-90 time" v-show="item.time !== 'end' && item.time !== 'noStart'">
									<image :src="
                                            getBaseUrl() + '/admin-api/system/file/19/get/2e1d73e69f0376ae997cdbe7bbd35e9696bcd143c724c6e256824e351be84382.png'
                                        " class="w-f h-90"></image>
									<view class="time-box pl-28 pt-8">
										<view class="fs-20 fw-500 text-color5">秒杀中</view>
										<view class="f ai-c">
											<view class="fs-16 fw-500 text">距结束: </view>
											<u-count-down :time="item.time" format="HH:mm:ss" autoStart millisecond
												@change="onChange">
												<view class="f ai-c time-data">
													<view>
														{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}
													</view>
													<view>:</view>
													<view>
														{{ timeData.minutes }}
													</view>
													<view>:</view>
													<view>
														{{ timeData.seconds }}
													</view>
												</view>
											</u-count-down>
										</view>
									</view>
								</view>
								<!-- 即将开始 -->
								<view class="w-190 h-90 time" v-show="item.time === 'noStart'">
									<image :src="
                                            getBaseUrl() + '/admin-api/system/file/19/get/7d45cc663099d58e95a1b7b40ba29dc3dc10bb449bdbdc6955a0625ee9f913f9.png'
                                        " class="w-f h-90"></image>
									<view class="time-box pl-28 pt-8">
										<view class="fs-20 fw-500 text-color5">即将开始</view>
										<view class="f ai-c">
											<view class="fs-16 fw-500 text">距结束: </view>
											<u-count-down :time="item.time" format="HH:mm:ss" autoStart millisecond
												@change="onChange">
												<view class="f ai-c time-data">
													<view>
														{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}
													</view>
													<view>:</view>
													<view>
														{{ timeData.minutes }}
													</view>
													<view>:</view>
													<view>
														{{ timeData.seconds }}
													</view>
												</view>
											</u-count-down>
										</view>
									</view>
								</view>
								<!-- 秒杀已结束 -->
								<view class="w-190 h-90 time" style="right: -12rpx; top: -6px"
									v-show="item.time === 'end'">
									<image src="http://cwht.ricecs.cn/app/shop/end-bg.png" class="w-f h-90"></image>
									<view class="time-box pt-8 pl-42">
										<text class="fs-20 fw-500 text-color3">秒杀已结束</text>
									</view>
								</view>
								<image :src="item.picUrl" class="w-343 b-24" mode="widthFix"></image>
								<view class="ph-12">
									<view class="fs-28 fw-600 mt-16 text-color4 text-ellipsis-2">{{ item.name }}</view>
									<view class="mt-8 fs-30 fw-600 text-color7">¥{{ item.seckillPrice }} </view>
									<view class="fs-22 text-color3 old-price">¥{{ item.originalPrice||0 }}</view>
									<!-- 秒杀状态 -->
									<view class="h-64 b-4 mt-20 clock ph-4 pv-4"
										:class="item.time == 'end' || item.time == 'noStart' ? 'noclick' : ''">
										<view class="f ai-c jc-c w-f clock-box b-4">
											<image src="http://cwht.ricecs.cn/app/shop/clock.png"
												class="w-30 h-30 mr-12"></image>
											<view class="fs-28 fw-500 text-color7 text">立即秒杀</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view>
							<view v-for="(item, index) in listR" :key="index"
								class="w-343 b-24 ph-8 pt-8 pb-20 goods mb-16" @click="toDetail(item)">
								<!-- 秒杀中 -->
								<view class="w-190 h-90 time" v-show="item.time !== 'end' && item.time !== 'noStart'">
									<image :src="
                                            getBaseUrl() + '/admin-api/system/file/19/get/2e1d73e69f0376ae997cdbe7bbd35e9696bcd143c724c6e256824e351be84382.png'
                                        " class="w-f h-90"></image>
									<view class="time-box pl-28 pt-8">
										<view class="fs-20 fw-500 text-color5">秒杀中</view>
										<view class="f ai-c">
											<view class="fs-16 fw-500 text">距结束: </view>
											<u-count-down :time="item.time" format="HH:mm:ss" autoStart millisecond
												@change="onChange">
												<view class="f ai-c time-data">
													<view>
														{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}
													</view>
													<view>:</view>
													<view>
														{{ timeData.minutes }}
													</view>
													<view>:</view>
													<view>
														{{ timeData.seconds }}
													</view>
												</view>
											</u-count-down>
										</view>
									</view>
								</view>
								<!-- 即将开始 -->
								<view class="w-190 h-90 time" v-show="item.time === 'noStart'">
									<image :src="
                                            getBaseUrl() + '/admin-api/system/file/19/get/7d45cc663099d58e95a1b7b40ba29dc3dc10bb449bdbdc6955a0625ee9f913f9.png'
                                        " class="w-f h-90"></image>
									<view class="time-box pl-28 pt-8">
										<view class="fs-20 fw-500 text-color5">即将开始</view>
										<view class="f ai-c">
											<view class="fs-16 fw-500 text">距结束: </view>
											<u-count-down :time="item.time" format="HH:mm:ss" autoStart millisecond
												@change="onChange">
												<view class="f ai-c time-data">
													<view>
														{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}
													</view>
													<view>:</view>
													<view>
														{{ timeData.minutes }}
													</view>
													<view>:</view>
													<view>
														{{ timeData.seconds }}
													</view>
												</view>
											</u-count-down>
										</view>
									</view>
								</view>
								<!-- 秒杀已结束 -->
								<view class="w-190 h-90 time" style="right: -12rpx; top: -6px"
									v-show="item.time == 'end'">
									<image src="http://cwht.ricecs.cn/app/shop/end-bg.png" class="w-f h-90"></image>
									<view class="time-box pt-8 pl-42">
										<text class="fs-20 fw-500 text-color3">秒杀已结束</text>
									</view>
								</view>
								<image :src="item.picUrl.split(',')[0]" class="w-343 b-24" mode="widthFix"></image>
								<view class="ph-12">
									<view class="fs-28 fw-600 mt-16 text-color4 text-ellipsis-2">{{ item.name }}</view>
									<view class="mt-8 fs-30 fw-600 text-color7">¥{{ item.seckillPrice }} </view>
									<view class="fs-22 text-color3 old-price">¥{{ item.originalPrice||0 }}</view>
									<!-- 秒杀状态 -->
									<view class="h-64 b-4 mt-20 clock ph-4 pv-4"
										:class="item.time == 'end' || item.time == 'noStart' ? 'noclick' : ''">
										<view class="f ai-c jc-c w-f clock-box b-4">
											<image src="http://cwht.ricecs.cn/app/shop/clock.png"
												class="w-30 h-30 mr-12"></image>
											<view class="fs-28 fw-500 text-color7 text">立即秒杀</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, getCurrentInstance } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { seckillConfigList, seckillActivityPage } from '@/services/api/shop/index';
	import { cartGetCount } from '@/services/api/shop/cart';
	import { getBaseUrl } from '@/utils/env';
	const { proxy } = getCurrentInstance();

	const timeCurt = ref(0);

	const queryParams = ref({
		pageNo: 1,
		pageSize: 10,
		configId: null,
		keyword: '',
	});
	const listL = ref<any>([]);
	const listR = ref<any>([]);
	const cartCount = ref(0);
	const timeData = ref({});
	const timeList = ref([]);

	onShow(() => {
		listL.value = [];
		listR.value = [];
		getTimeList();
		getCartCount();
	});

	const onChange = (e : any) => {
		timeData.value = e;
	};

	function toCart() {
		uni.navigateTo({
			url: '/pages_shop/shopCart/index',
		});
	}
	//获取购物车数量
	async function getCartCount() {
		const { data } = await cartGetCount({});
		cartCount.value = data;
	}
	//搜索
	function handelSearch() {
		listL.value = [];
		listR.value = [];
		getSpuPage();
	}
	//上拉加载
	function scrolltolower() {
		queryParams.value.pageNo++;
		getSpuPage();
	}
	//获取商品
	async function getSpuPage() {
		const { data } = await seckillActivityPage(queryParams.value);
		if (data.list.length > 0) {
			data.list.forEach((item : any, index : number) => {
				item.time = getTime(item.startTime, item.endTime);
				item.picUrl = item.picUrl.split(',')[0]
				// item.time = getTime(1711943609000, 1711954409000);
				if (index % 2 === 0) {
					listL.value.push(item);
				} else {
					listR.value.push(item);
				}
			});
			console.log(data.list);
		}
	}
	//开始时间  秒杀时间
	function getTime(seckillTime : number, seckillDuration : number) {
		// 当前时间
		let nowDate = new Date().getTime();
		console.log(proxy.$moment(nowDate).format('YYYY-MM-DD HH:mm:ss'), nowDate);
		console.log(proxy.$moment(seckillTime).format('YYYY-MM-DD HH:mm:ss'), seckillTime);
		let data : any = '';
		// if (nowDate < seckillTime) {
		//     console.log('秒杀未开始');
		//     data = 'noStart';
		// } else {
		//     if (nowDate > seckillTime + seckillDuration) {
		//         console.log('秒杀结束');
		//         data = 'end';
		//     } else {
		//         console.log('秒杀中');
		//         data = nowDate - (seckillTime + seckillDuration);
		//     }
		// }
		if (seckillTime < nowDate) {
			if (nowDate > seckillDuration) {
				console.log('秒杀结束');
				data = 'end';
			} else {
				console.log('秒杀中');
				// data = nowDate - (seckillTime + seckillDuration);
				data = seckillDuration - nowDate;
			}

		} else {
			console.log('秒杀未开始');
			data = 'noStart';
		}
		return data;
	}
	//获取时间段
	async function getTimeList() {
		const { data } = await seckillConfigList({});
		data.forEach((item : any) => {
			item.timeSlot = `${item.startTime.slice(0, 5)}-${item.endTime.slice(0, 5)}`;
		});
		timeList.value = data;
		queryParams.value.configId = timeList.value[timeCurt.value].id;
		listL.value = [];
		listR.value = [];
		getSpuPage();
	}
	//切换时间
	function changeTime(data : any) {
		timeCurt.value = data.index;
		queryParams.value.configId = timeList.value[timeCurt.value].id;
		listL.value = [];
		listR.value = [];
		getSpuPage();
	}

	const toDetail = (data : any) => {
		uni.navigateTo({
			url: `/pages_shop/seckillDetail/index?status=seckill&id=${data.id}`,
		});
	};
	uni.setNavigationBarColor({
		frontColor: '#ffffff',
		backgroundColor: '#ffffff',
	});
	let systemInfo = uni.getSystemInfoSync();
	const statusBarHeight = systemInfo.statusBarHeight;
	let pageHeight = systemInfo.windowHeight;
	const height = pageHeight - statusBarHeight - 46 - 43;
	console.log(height);
</script>

<style lang="scss" scoped>
	.toClassify {
		.goods {
			background: #f5f5f5;
			position: relative;

			.old-price {
				text-decoration: line-through;
			}

			.clock {
				background-image: linear-gradient(139deg, #fe525d 0%, #fd3543 100%);

				.clock-box {
					background: #ffe272;
					height: 100%;
				}
			}

			.noclick {
				background-image: linear-gradient(139deg, #d6d6d6 0%, #c2c2c2 100%);

				.clock-box {
					background: #ebebeb;
				}

				.text {
					color: #999999;
				}
			}

			.time {
				position: absolute;
				right: -10rpx;
				top: -4rpx;

				.time-box {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0rpx;
					top: 8rpx;

					.text {
						color: #fffccd;
					}

					.time-data {
						view {
							font-weight: 500;
							font-size: 16rpx;
							color: #fffccd;
						}
					}
				}
			}
		}

		.list {
			.box {
				background: #f5f5f5;
				height: 100%;
			}

			.list-content {
				height: 100%;
			}

			.list-box {
				height: 100%;

				.text {
					border: 2rpx solid #f0f0f0;
				}
			}

			.active {
				background: #fff;
				color: #fabb3c;
				position: relative;
			}

			.active::after {
				position: absolute;
				background: #fabb3c;
				height: 40rpx;
				width: 6rpx;
				top: 50%;
				margin-top: -20rpx;
				left: 0;
				content: '';
			}
		}

		.top-box {
			background: #fabb3c;
		}

		.cart {
			position: relative;

			view {
				background: #f54040;
				position: absolute;
				right: -10rpx;
				top: -10rpx;
			}
		}

		.search {
			position: relative;
			background: #fabb3c;

			.search-btn {
				position: absolute;
				right: 6rpx;
				top: 6rpx;
				z-index: 11;
			}

			::v-deep .u-button__text {
				font-size: 22rpx !important;
				font-weight: 400 !important;
			}

			::v-deep .u-button {
				height: 48rpx !important;
			}
		}
	}
</style>